<template>
	<el-dialog 
		:title="title" 
		:visible="diaModal" 
		:show-close='false'
		:fullscreen='fullscreen'
		class='Dialog'
		@close='closeDia'
		:width='width'
		:top='top'
	>
	<!--:before-close="beforeClose"-->
	<!--:visible.sync="diaModal" -->
		<div class="modal_title" slot='title'>
			<div>{{title}}</div>
			<div class="modal_title_btn">
				<Button @click="fullscreenFun" type="" icon="el-icon-search"></Button>
				<Button type="" @click="closeDia" icon="el-icon-close"></Button>
			</div>
		</div>
		<div class="dia_body">
			<div class="header_kong"></div>
			<slot></slot>
		</div>
		
		
		<div v-if="footer" slot='footer'><slot name='footer'></slot></div>
		<!--<span slot="footer" class="dialog-footer">
		    <el-button @click="closeDia">取 消</el-button>
		    <el-button type="primary" @click="submit">确 定</el-button>
		</span>-->
	</el-dialog>
</template>

<script>
	import Button from '@/components/Button/Button.vue'
	export default {
		name:'Dialog',
		props: {
			dataList: {
				default: function() {
					return []
				},
			},
			diaModal: {default: false,},
			footer: {default: false,},
			title:{default:'Title Name'},
			width:{default:'60%'},
			top:{default:'0'},//10vh
//			fullscreen:{default:false}

		},
		components: {
			[Button.name]: Button,
		},
		data() {
			return {
				fullscreen:false
			}
		},
		created() {},
		watch: {

		},
		computed: {

		},
		mounted() {
			console.log(this.diaModal)
		},
		methods: {
			closeDia(){
				this.$emit('update:diaModal',false)
			},
			submit(){
				this.$emit('submit')
			},
			fullscreenFun(){
				this.fullscreen = this.fullscreen?false:true ; 
				//this.$emit('update:fullscreen',true)
			},
			close(){
				this.$emit('update:diaModal',false)
			},
//			beforeClose(done){
//				this.close();
//				done()
//			},
		}
	}
</script>

<style lang="scss">
	@import './Dialog.scss';
</style>